<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp"%>
<!-- 分页显示演示开始 -->
<style>
<!--
.tab {
	margin-bottom: 0px;
	margin-top: 6px;
}

.tab>li>a {
	line-height: 22px;
	padding-bottom: 2px;
	padding-top: 2px;
}

.tab-content {
	border: 1px solid #E3E3E3;
	border-radius: 0px 0px 4px 4px;
	border-top: none;
	padding: 2px;
}

.table [valign="top"] {
	vertical-align: top;
}

#single div[id^=m] {
	background-color: #FFFFFF;
	border: 1px solid #E3E3E3;
	border-radius: 4px;
	margin: 2px;
	padding: 2px;
	line-height: 25px;
	float: left;
	width: 45%;
	min-height: 225px;
}

#mNoGoods {
	max-height: 225px;
	display: block;
	overflow-y: auto;
}

#single div[id^=m] span {
	float: left;
}

.title {
	width: 60px;
	margin-left: 20px;
}

#memo {
	width: 99%;
}

tr td:FIRST-CHILD {
	text-align: right;
}

#goodsQr {
	min-height: 40px;
	width: 80%;
}

#qrCodeList {
	background-color: #FFFFFF;
	border: 1px solid #E3E3E3;
	border-radius: 4px;
	min-height: 400px;
	margin: 2px;
	padding: 15px;
	max-height: 600px;
}

div[name=box] {
	border: 1px solid;
	color: blue;
	padding: 15px;
	border-radius: 4px 4px 4px 4px;
}

input[readonly] {
	cursor: auto;
}

.qrCodeList {
	width: 96%;
	min-height: 300px;
	background-color: #FFFFFF;
	border: 1px solid;
	color: blue;
	padding: 15px;
	border-radius: 4px 4px 4px 4px;
	overflow-y: auto;
}

#goodsQr {
	min-height: 40px;
	width: 80%;
}

.counter0 {
	font-size: 18px;
	font-weight: bold;
}

.counter1 {
	color: blue;
	font-size: 18px;
	font-weight: bold;
}

.counter2 {
	color: red;
	font-size: 24px;
	font-weight: bold;
}
-->
</style>
<ul class="nav nav-tabs tab tBlock">
	<li class="active">
		<a deny="not" class="nFocus" href="#step" data-toggle="tab">
			<i class="icon-tags"></i>
			商品入库
		</a>
	</li>
</ul>
<div class="tab-content">
	<div class="tab-pane active">
		<form id="inputForm" class="form-inline" action="${ctx}/adoms/storageBatch/save" method="post">
			<table style="width: 80%; margin: auto;" class="table table-striped table-bordered table-condensed">
				<tr>
					<td class="span2">入库单:</td>
					<td>
						<select id="batch" name="batch" style="width: auto;">
							<option id="plz" value="-1">请选择商品入库单...</option>
							<c:forEach items="${batchList }" var="batch" varStatus="index">
								<option value="${batch.id }">${index.index + 1}.${batch.batchCode} - ${batch.marchandise.name } - ${batch.numOfMarchandise } ${batch.marchandise.packageing} (${batch.numOfBox} 件)</option>
							</c:forEach>
						</select>
						<div class="hide">
							<c:forEach items="${batchList }" var="batch" varStatus="index">
								<div id="batch${batch.id }">
									${index.index + 1}.${batch.marchandise.name } - 规格：${batch.marchandise.spcification } -
									<span class="numOfBox">${batch.marchandise.numOfBox }</span>
									${batch.marchandise.packageing}
									<br />
									本单应录入
									<span class="counter0">${batch.numOfMarchandise }</span>
									${batch.marchandise.packageing} (${batch.numOfBox}件)，已录入
									<span class="counter1">${batch.numOfMarchandiseHasDone }</span>
									${batch.marchandise.packageing} (
									<span class="jbox1">${batch.numOfBoxHasDone}</span>
									件)， 还剩
									<span class="counter2">${batch.numOfMarchandise - batch.numOfMarchandiseHasDone } </span>
									${batch.marchandise.packageing} (
									<span class="jbox2">${batch.numOfBox - batch.numOfBoxHasDone}</span>
									件)需录入
								</div>
							</c:forEach>
						</div>
					</td>
				</tr>
				<tr>
					<td>录入状态:</td>
					<td id="counterBar"></td>
				</tr>
				<tr>
					<td>二维码录入:</td>
					<td>
						<input id="goodsQr" type="text">
						<span class="btn btn-primary" id="clearInputCode">清空</span>
					</td>
				</tr>
				<tr>
					<td valign="top">已录入二维码:</td>
					<td>
						<div class="qrCodeList" id="qrCodeList"></div>
					</td>
				</tr>
				<tr>
					<td style="text-align: center;" colspan="2">
						<span class="btn">重新扫描</span>
						<button type="button" disabled="disabled" id="submitBtn" class="btn btn-primary">确认入库</button>
					</td>
				</tr>
			</table>
		</form>
	</div>
</div>
<script>
	//录入计数器
	var COUNTER = {
		getNumOfBox : function() {
			var v = parseInt($("#counterBar .numOfBox").html());
			return v;
		},
		getV0 : function() {
			var v0 = parseInt($("#counterBar .counter0").html());
			return v0;
		},
		getV1 : function() {
			var v1 = parseInt($("#counterBar .counter1").html());
			return v1;
		},
		getV2 : function() {
			var v2 = parseInt($("#counterBar .counter2").html());
			return v2;
		},
		setV0 : function(n) {
			$("#counterBar .counter0").html(n);
			var v0 = parseInt($("#counterBar .counter0").html());
			return v0;
		},
		setV1 : function(n) {
			$("#counterBar .counter1").html(n);
			var v1 = parseInt($("#counterBar .counter1").html());
			this.setJbox1((v1 / this.getNumOfBox()).toFixed(2));
			return v1;
		},
		setV2 : function(n) {
			$("#counterBar .counter2").html(n);
			var v2 = parseInt($("#counterBar .counter2").html());
			this.setJbox2((v2 / this.getNumOfBox()).toFixed(2));
			return v2;
		},
		setJbox1 : function(n) {
			$("#counterBar .jbox1").html(n);
			var v2 = parseInt($("#counterBar .jbox1").html());
			return v2;
		},
		setJbox2 : function(n) {
			$("#counterBar .jbox2").html(n);
			var v2 = parseInt($("#counterBar .jbox2").html());
			return v2;
		},
		counter : function(len) {
			this.setV2(this.getV2() - len);
			this.setV1(this.getV1() + len);
		},
		backCounter : function(len) {
			this.setV2(this.getV2() + len);
			this.setV1(this.getV1() - len);
		}
	};
	$(function() {
		$("#submitBtn").click(function() {
			$(this).attr("disabled", "disabled");
			var c = $("#inputForm").serialize();
			$.post("${ctx}/adoms/storageBatch/inStorage", c, function(result) {
				if (result) {
					$(this).removeAttr("disabled");
					msgAlert.show("入库成功！");
					$("#batch option:selected").remove();
					$("#batch").change();
				} else {
					msgAlert.show("数据异常，请检查后重新操作！");
				}
			}, 'json');
		});
		$("#batch").change(function() {
			$("#plz").remove();
			$("#qrCodeList").empty();//清空内容
			var value = $(this).val();
			var html = $("#batch" + value).html();
			$("#counterBar").html(html);
			$("#submitBtn").attr("disabled", "disabled");
		});
		//清空输入框中的二维码
		$("#clearInputCode").click(function() {
			$("#goodsQr").val("");
		});
		$("#inputForm").submit(function() {
			return false;
		});
		$("#goodsQr").focus(function() {
			if ($("#batch").val() == -1) {
				msgAlert.show("请选择入库单！");
				return false;
			}
		}).on(
				"keyup",
				function(e) {
					var _self = $(this);
					var keyCode = e.keyCode;
					if (!keyCode || keyCode == 13) {
						var val = $.trim($(this).val());
						$("[name=box]").each(function() {
							var q = $(this).attr("value");
							if (q == val) {
								msgAlert.show("二维码：" + val + "重复！");
								$("#goodsQr").val("").focus();
								_self.val("");
								val = "";
								return false;
							}
						});
						if (val) {
							if (COUNTER.getV2() == 0) {
								msgAlert.show("本批次已扫描完成，请检查清单并确认入库！");
								$("#submitBtn").removeAttr("disabled");
								return false;
							}
							$.post("${ctx}/adoms/qrGoodsCode/getGoodsOrBoxByCode", {
								qrCode : val
							}, function(map) {
								if (map) {
									//列出本箱中未入库的货物
									var len = 0; //有效计数器
									var box = $("<div name='box' value='" + val + "'><span class='close' name='boxRemove'>x</span></div>");
									if (map.box) {
										if (map.box.goodsNum != COUNTER.getNumOfBox()) {
											msgAlert.show("箱码规格不正确！");
											return false;
										}
										if(map.box.goodsNum != map.gList.length) {
											msgAlert.show("该箱已被开箱，箱码失效，请单个扫描！");
											return false;
										}
										$.each(map.gList, function(i, item) {
											var isRepeat = false;
											$("input[name=qrid]").each(function() {
												var value = $(this).val();
												if (value == item.id) {
													isRepeat = true;
												}
											});
											if (isRepeat) {
												$(box).append(i + ".流水码" + " - " + item.wCode + " - " + item.state + " - 该二维码已被使用，故此作废<br/>");
											} else {
												$(box).append(i + ".流水码" + " - " + item.wCode + "<input type='hidden' name='qrid' value='" + item.id + "'/> - " + item.state + "<br/>");
												len++;
											}
										});
										$(box).prepend(
												"箱码:" + map.box.wCode + " - 箱码规格：" + map.box.goodsNum + "  - 有效数量:" + len + "<input type='hidden' name='boxid' value='" + map.box.id + "'/> - "
														+ map.box.state + " <br/>");
									} else {
										var goods = map.goods;
										if (goods) {
											var isRepeat = false;
											$("input[name=qrid]").each(function() {
												var value = $(this).val();
												if (value == goods.id) {
													isRepeat = true;
												}
											});
											var item;
											if (isRepeat) {
												item = "流水码." + goods.wCode + " - " + goods.state + " - 该二维码已被使用，故此作废";
											} else {
												if (goods.memo != COUNTER.getNumOfBox()) {
													msgAlert.show("二维码:" + val + "所属箱码(" + goods.memo + ")规格不正确");
													_self.val("");
													return false;
												} else {
													item = "流水码." + goods.wCode + "<input type='hidden' name='qrid' value='" + goods.id + "'/> - " + goods.state;
													len++;
												}
											}
											$(box).prepend(item);
										}
									}
									//记数显示统计
									if ((COUNTER.getV2() - len) >= 0) {
										COUNTER.counter(len);
										//删除功能
										$("[name=boxRemove]", box).click(function() {
											box.remove();
											//记数显示统计,删除的时候计数要加回来
											COUNTER.backCounter(len);
											$("#submitBtn").attr("disabled", "disabled");
										});
										$("#qrCodeList").prepend(box);
										_self.val("");
										if (COUNTER.getV2() == 0) {
											msgAlert.show("本批次扫描完成，请检查清单并确认入库！");
											$("#submitBtn").removeAttr("disabled");
										} else {
											$("#submitBtn").attr("disabled", "disabled");
										}
									} else {
										if (len > 1) {
											msgAlert.show("本箱数量超过剩于录入数量！");
										} else {
											msgAlert.show("本批次录入已完成！");
										}
									}
								} else {
									$("#qrCodeList").prepend("无效二维码:" + val + "<br/>");
								}
								_self.val("");
							}, "json");
						}
					}
				});
	});
</script>
